.root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}

.root:hover > .image {
  box-shadow: 0px 0px 5px rgba(0,0,0, 0.25);
}

html[data-theme='dark'] .root:hover > .image  {
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.25);
}

.image {
  flex: 1 1 auto;
  height: 100%;
  overflow-y: auto;
  transition: box-shadow 0.3s ease-in-out;
  box-shadow: 0px 0px 2px rgba(0,0,0, 0.15);
  object-fit: cover;
  object-position: center;
}

html[data-theme='dark'] .image {
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.15);
}

.title {
  font-size: 1em;
  margin-bottom: 5px;
}






